<template>
	<el-dialog :title="dialogTitle" :visible.sync="visible" top="0" width="700px" append-to-body>
		<el-form v-bind="formConfig" :model="examData" :rules="formRules" label-width="80px" v-loading="loading">
			<el-row :gutter="24">
				<el-col :span="24">
					<el-form-item label="考试试卷" prop="paperId">
						<el-select v-bind="paperSelect" v-model="examData.paperId" placeholder="请输入关键字">
							<el-option v-for="(item, index) in paperDataList" :key="index" :label="item.name" :value="item.id" />
						</el-select>
						<span class="unit">
							<font color="#f00">试卷总分：{{ paperScore }}分</font>
						</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="考试分类" prop="examClassId">
						<el-select v-bind="classifySelect" v-model="examData.examClassId" placeholder="请选择考试分类">
							<el-option v-for="(item, index) in examClassifys" :key="index" :label="item.name" :value="item.id" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="及格分数" prop="passScore">
						<el-input-number v-model="examData.passScore" controls-position="right" :min="1" />
						<span class="unit">分</span>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="考试状态" prop="status">
						<el-radio-group v-model="examData.status" v-removeAriaHidden:radio>
							<el-radio label="1">正常</el-radio>
							<el-radio label="2">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="试卷展示" prop="paperShowType">
						<el-radio-group v-model="examData.paperShowType" v-removeAriaHidden.radio>
							<el-radio label="1">整卷展示</el-radio>
							<el-radio label="2">单题展示</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="试题排序" prop="subjectsSort">
						<el-radio-group v-model="examData.subjectsSort" v-removeAriaHidden:radio>
							<el-radio label="1">固定排序</el-radio>
							<el-radio label="2">随机排序</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="选项随机" prop="optionsSort">
						<el-radio-group v-model="examData.optionsSort" v-removeAriaHidden:radio>
							<el-radio label="1">固定排序</el-radio>
							<el-radio label="2">随机排序</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
				<!-- <el-col :span="12">
					<el-form-item label="考试次数" prop="examMaxNum">
						<el-input-number v-model="examData.examMaxNum" controls-position="right" :min="1" />
						<span class="unit">次</span>
					</el-form-item>
				</el-col> -->
				<el-col :span="24">
					<el-form-item label="考试说明" v-if="!!visible">
						<sw-tiny-editor v-model="examData.testInstructions" type="simple" height="240"></sw-tiny-editor>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template slot="footer">
			<el-button size="medium" @click="visible = false">取消</el-button>
			<el-button size="medium" type="primary" :loading="btnLoading" @click="handleSubmitForm()">{{ formTypeName }}</el-button>
		</template>
	</el-dialog>
</template>

<script>
import lodash from 'lodash';
import moment from 'moment';
import formMixins from '@/mixins/formMixins';
import { queryPapersList } from '@/api/exam/testPaper';
import { getClassifyList } from '@/api/system/sysClassify';
import { examDetail, addExam, updateExam } from '@/api/exam/testExam';
export default {
	mixins: [formMixins],
	data() {
		return {
			formName: '考试',
			examData: {},
			formRules: {
				paperId: [{ required: true, message: '请选择考试试卷', trigger: 'change' }],
				passScore: [{ required: true, message: '请输入及格分数', trigger: 'blur' }],
				examClassId: [{ required: true, message: '请选择考试分类', trigger: 'change' }]
			},
			classifyList: [],
			paperDataList: [],
			classifySelect: {
				loading: false,
				filterable: true,
				placeholder: '请选择考试分类'
			},
			paperSelect: {
				remote: true,
				loading: false,
				filterable: true,
				popperAppendToBody: false,
				placeholder: '请选择考试试卷',
				remoteMethod: this.handleRemoteMethods
			}
		};
	},
	computed: {
		detailData() {
			return eval(examDetail);
		},
		callFunction() {
			return eval(this.addOrEdit ? addExam : updateExam);
		},
		examClassifys() {
			let classifys = this.$store.getters.classifyData || [];
			return classifys.filter((n) => n.classType === '2');
		},
		paperScore() {
			let paperId = this.examData.paperId;
			let paperData = this.paperDataList.find((n) => n.id === paperId);
			return !paperData ? '0.0' : paperData.totalScore;
		},
		submitParams() {
			let params = lodash.cloneDeep(this.examData);
			let paperData = this.paperDataList.find((n) => n.id === params.paperId);
			if (this.addOrEdit) {
				params['testExamStudentVOList'] = [{ ruleType: '1', testExamRuleList: [] }];
			} else if (!params['testExamStudentVOList']) {
				params['testExamStudentVOList'] = [{ ruleType: '1', testExamRuleList: [] }];
			}
			params['name'] = paperData?.name || '';
			params['examMaxNum'] = 100;
			return params;
		}
	},
	methods: {
		//考试详情后初始化数据
		formatFormParams() {
			let paper = this.formData.testPaper;
			let classify = this.formData.sysClassify;
			this.paperDataList = !paper ? [] : [paper];
			this.$nextTick(() => {
				this.examData = { ...this.formData };
				if (this.addOrEdit) {
					this.$set(this.examData, 'status', '1');
					this.$set(this.examData, 'optionsSort', '1');
					this.$set(this.examData, 'subjectsSort', '1');
					this.$set(this.examData, 'paperShowType', '1');
				}
			});
		},

		//获取试卷数据
		async getPapersList(name) {
			let page = { page: 1, limit: 10 };
			let params = { ...page, name, status: 1, permission: 1 };
			let result = await queryPapersList(params).then((res) => res.data);
			if (result.code === '0') {
				this.paperDataList = result.data || [];
			}
		},

		async handleRemoteMethods(query) {
			this.paperSelect.loading = true;
			await this.getPapersList(query);
			this.paperSelect.loading = false;
		}
	}
};
</script>
